<template>
	<view class="product-box">
		<!-- 使用transition-group 包裹图片元素 --><!-- 添加key强制重新渲染 -->
		<transition-group name="slide" tag="view" class="products-container" :key="currentProduct.productId">
			<view :class="['product-item', currentProduct.images.length > 12 ? 'three-per-row' : 'two-per-row']"
				v-for="(item ,index) in currentProduct.images" :key="index" :style="getAnimationDelay(index)">
				<image :src="item.image" class="img-style" alt="product image"></image>
			</view>
		</transition-group>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from "vue";
	import { useCommonStore } from "../stores/useCommonStore";
	// 定义 Image 类型，imgId 为可选属性
	type Image = {
		image : string;
		imgId ?: string;
	};
	// 定义 Product 类型
	type Product = {
		productId : number;
		images : Image[];
	};
	const commonStore = useCommonStore();
	const productList = ref<Product[]>([
		{
			productId: 1,
			images: [
				{ image: '/static/img/1.jpg', imgId: '001' },
				{ image: '/static/img/2.jpg', imgId: '002' },
				{ image: '/static/img/3.jpg', imgId: '003' },
				{ image: '/static/img/4.jpg', imgId: '004' },
				{ image: '/static/img/1.jpg', imgId: '001' },
				{ image: '/static/img/2.jpg', imgId: '002' },
				{ image: '/static/img/3.jpg', imgId: '003' },
				{ image: '/static/img/4.jpg', imgId: '004' },
				{ image: '/static/img/1.jpg', imgId: '001' },
				{ image: '/static/img/2.jpg', imgId: '002' },
				{ image: '/static/img/3.jpg', imgId: '003' },
				{ image: '/static/img/4.jpg', imgId: '004' },
				{ image: '/static/img/1.jpg', imgId: '001' },
				{ image: '/static/img/2.jpg', imgId: '002' },
				{ image: '/static/img/3.jpg', imgId: '003' },
				{ image: '/static/img/4.jpg', imgId: '004' },
				{ image: '/static/img/17.jpg', imgId: '017' },
				{ image: '/static/img/18.jpg', imgId: '018' },
			]
		},

		{
			productId: 2,
			images: [
				{ image: '/static/img/2.jpg', imgId: '001' },
				{ image: '/static/img/3.jpg', imgId: '002' },
				{ image: '/static/img/1.jpg' },
				{ image: '/static/img/4.jpg' },
				{ image: '/static/img/1.jpg' },
				{ image: '/static/img/2.jpg' },
				{ image: '/static/img/17.jpg' },
			]
		},
		{
			productId: 3,
			images: [
				{ image: '/static/img/1.jpg', imgId: '001' },
				{ image: '/static/img/2.jpg', imgId: '002' },
				{ image: '/static/img/3.jpg', imgId: '003' },
				{ image: '/static/img/4.jpg', imgId: '004' },
				{ image: '/static/img/1.jpg', imgId: '001' },
				{ image: '/static/img/2.jpg', imgId: '002' },
				{ image: '/static/img/3.jpg', imgId: '003' },
				{ image: '/static/img/4.jpg', imgId: '004' },
				{ image: '/static/img/1.jpg', imgId: '001' },
				{ image: '/static/img/2.jpg', imgId: '002' },
				{ image: '/static/img/3.jpg', imgId: '003' },
				{ image: '/static/img/4.jpg', imgId: '004' },
				{ image: '/static/img/1.jpg', imgId: '001' },
				{ image: '/static/img/2.jpg', imgId: '002' },
				{ image: '/static/img/3.jpg', imgId: '003' },
				{ image: '/static/img/4.jpg', imgId: '004' },
				{ image: '/static/img/17.jpg', imgId: '017' },
				{ image: '/static/img/18.jpg', imgId: '018' },
			]
		},
		{
			productId: 4,
			images: [
				{ image: '/static/img/dog.jpg', imgId: '001' },
				{ image: '/static/img/ele.gif', imgId: '002' },
				{ image: '/static/img/fox.jpg' },
				{ image: '/static/img/hide.jpg' },
				{ image: '/static/img/dog.jpg' },
				{ image: '/static/img/ele.gif' },
				{ image: '/static/img/fox.jpg' },
				{ image: '/static/img/hide.jpg' },
				{ image: '/static/img/hide.jpg' },
			]
		},
		{
			productId: 5,
			images: [
				{ image: '/static/img/dog.jpg', imgId: '001' },
				{ image: '/static/img/ele.gif', imgId: '002' },
				{ image: '/static/img/fox.jpg' },
				{ image: '/static/img/hide.jpg' },
				{ image: '/static/img/dog.jpg' },
				{ image: '/static/img/ele.gif' },
				{ image: '/static/img/fox.jpg' },
				{ image: '/static/img/hide.jpg' },
				{ image: '/static/img/hide.jpg' },
				{ image: '/static/img/dog.jpg', imgId: '001' },
				{ image: '/static/img/ele.gif', imgId: '002' },
			]
		},
	])

	// 使用 computed 计算当前选中的 product 对象
	const currentProduct = computed(() => {
		// productList.value[0]
		return productList.value.find(product => product.productId === commonStore.nowSelectedId) || null;
	});

	// 计算每个项目的动画延迟
	const getAnimationDelay = (index : number) => {
		const itemsPerRow = currentProduct.value.images.length > 12 ? 3 : 2;
		const row = Math.floor(index / itemsPerRow);  // 获取行号
		return {
			animationDelay: `${row * 0.1}s`  // 每行延迟0.1秒
		}
	};
</script>

<style scoped lang="scss">
	.product-box {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
		padding: 0.25rem;
	}

	.products-container {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.product-item {
		box-sizing: border-box;
		margin: 0.25rem;
		border-radius: 0.31rem;
		opacity: 0; // 初始状态设为透明
		animation: slideDown 0.3s ease-out both; // 使用 forwards 保持最终状态
	}

	/* 一行显示两个图片的样式 */
	.two-per-row {
		margin: 0.5rem;
		width: calc((100% - 2rem) / 2);
		height: 7.25rem;
	}

	/* 一行显示三个图片的样式 */
	.three-per-row {
		width: calc((100% - 2rem) / 3);
		height: 6.88rem;
	}

	.img-style {
		width: 100%;
		height: 100%;
		border-radius: 0.31rem;
		object-fit: cover;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
	}

	/* 下滑动画关键帧 */
	@keyframes slideDown {
		0% {
			opacity: 0;
			transform: translateY(-100%); // 从更高的位置开始
		}

		70% {
			opacity: 1;
			transform: translateY(0); // 到达底部
		}

		80% {
			opacity: 1;
			transform: translateY(-1.2rem); // 第一次回弹
		}

		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 修改离开动画相关样式 */
	.slide-leave-active {
		position: absolute;
		transition: all 0.3s ease-out;
		width: calc((100% - 2rem) / 3); // 保持三列布局的宽度
		margin: 0.25rem;
		left: auto !important; // 防止位置重置
		top: auto !important; // 防止位置重置
	}

	/* 确保元素在原位置淡出 */
	.slide-leave-to {
		opacity: 0;
		transform: translateY(-100%);
	}

	/* 确保元素移动时平滑过渡 */
	.slide-move {
		transition: transform 0.1s ease-out;
	}
</style>